<template>
  <div class="course-content">
    <div class="title">华西二院耳鼻喉头颈外科睡眠呼吸监测预约系统</div>
    <div style="font-size: 14px;">登记号: {{ patient_registration_number }} | 联系电话: {{ contact_phone }}</div>
    <!-- 列表展示 -->
    <van-list>
      <van-cell
        v-for="item in list"
        :key="item.id"
        clickable
        @click="handleItemClick(item)"
      >
        <template #title>
          <div>
            <div>患儿姓名: {{ item.patientName }}</div>
          </div>
        </template>
        <template #default>
          <div>检查日期：{{ formatDate(item.examinationDate) }}</div>
        </template>
      </van-cell>
    </van-list>
    <div v-if="list.length === 0" class="no-appointment-tip">
      暂无预约记录
    </div>
    <div class="notice">
      <h3>注意事项：</h3>
      <ul>
        <li><strong style="color: red;">务必带上租借家长本人身份证</strong></li>
        <li>患儿需到场进行体格测量</li>
        <li>租借地点：锦江院区门诊一楼儿童治疗区内镜室</li>
        <li>归还设备时间：次日8:00-9:00，不能延期，超时将影响后续预约者，且报告无法当日出具！</li>
        <li>租借设备时间：13:00-17:00，超时未到者，无法租借，并需重新预约！</li>
        <li>报告出具时间：9点前归还，报告于当日10:00前出具</li>
        <li>如有特殊情况，请提前告知，联系电话：028-88570048，工作电话服务时间：8:00-12:00 13:00-17:00</li>
      </ul>
    </div>
    <!-- 返回按钮 -->
    <van-button type="primary" @click="goBack">返回</van-button>
  </div>
</template>

<script>

import { getLatestByRegistrationAndPhone } from '@/services/mother'
import { Dialog } from 'vant'

export default {
  name: 'mother_list',
  data () {
    return {
      list: [],
      patient_registration_number: '',
      contact_phone: ''
    }
  },
  created () {
    if (this.$route.query.patient_registration_number) this.patient_registration_number = this.$route.query.patient_registration_number
    if (this.$route.query.contact_phone) this.contact_phone = this.$route.query.contact_phone
    this.loadData()
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    async loadData () {
      const response = await getLatestByRegistrationAndPhone(this.patient_registration_number, this.contact_phone)
      if (response.data.code === 200) {
        this.list = [response.data.data]
      } else {
        console.error('获取数据失败', response.data.msg)
      }
    },
    formatDate (dateStr) {
      const date = new Date(dateStr)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    handleItemClick (item) {
      const examinationDate = new Date(item.examinationDate)
      const today = new Date()
      today.setHours(0, 0, 0, 0) // 将时间设置为0点，只比较日期
      examinationDate.setHours(0, 0, 0, 0) // 同样将检查日期的时间设置为0点
      const timeDiff = examinationDate - today // 计算时间差
      const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 将时间差转换为天数并向上取整
      if (daysDiff === 0) {
        Dialog({ message: '请于今天13:00-17:00准时去检查，过期作废。' })
      } else if (daysDiff > 0) {
        Dialog({ message: '请于' + daysDiff + '天后的13:00-17:00准时去检查，过期作废。' })
      } else {
        Dialog({ message: '检查日期已过，预约已作废。' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.notice {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;

  h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  ul {
    list-style-type: disc;
    padding-left: 20px;

    li {
      font-size: 14px;
      margin-bottom: 5px;
    }
  }
}
</style>
